body {
	margin: 0; padding: 0;
	background-color: #DFD;
	}

#header {
	width: 600px;
	margin: 3px auto;
	background-color: #EFF;
	}

#header h4 {
	margin: 0; padding: 0;
	font: normal normal bold 14px/20px sans-serif;
	text-align: center;
}

#header p {
	font: normal italic normal 8pt/1em sans-serif;
	margin: 2px; padding: 2px;
}

#content {
	width: 998px; height: 598px;
	position: relative;
	margin: 0 auto;
	background-color: #FFF;
	border: 1px solid #AAA;
	-moz-border-radius: 10px;
}





/* Estilos DxD*/
#drops {
	}

#drops div {
	position: absolute;
	width: 40px; height: 40px;
	float:left;
	-moz-border-radius: 10px;
	text-align: center;
	}


/*
 * Las siguientes propiedades son procesadas por los scripts .js de la actividad.
 * Sin este tratamiento, estas implicarían un comportamiento totalmente distinto en el renderizado del browser.
 * Con esto se logra posicionar los drags de una manera cómoda sin tener que editar los archivos .js.
 * Recalcula la posición de los drags según el margen,left y top asignados.
 */
#drags  {
	width: 1000px;
	left: 0px; top:50px;
	}

#drags div {
	width: 40px; height: 40px;
	text-align: center;
	margin: 0 5px;
	cursor: move;
	}

.miDxD-iniDrag {
	font: normal normal bold 16pt/40px sans-serif;
	width: 200px; height: 75px;
	border: 1px solid #AAA;
	-moz-border-radius: 10px;
	background-color: #AFA;
	}

.miDxD-enterDrag {
	color:  #FFF;
	border-color: #282;
	background-color: #4A4;
	}

.miDxD-dragDrag {
	color:  #026;
	border-color: #014;
	background-color: #FF8;
	}

.miDxD-iniDrop {
	font: normal normal bold 11pt/40px sans-serif;
	border: 1px solid #AAA;
	background-color: #EEE;
	border-color: #888;
	}

.miDxD-overDrop {
 	background-color: #026;
	border-color: #013;
	color: #FFF;
	}

.miDxD-trueDrop {
	}